<template>
	<view class="container">
		<view class="status-head">
			<image class="icon" :src="statusData[status].icon" mode="aspectFit"></image>
			<view class="title">{{ statusData[status].title }}</view>
			<text class="info">{{ statusData[status].info }}</text>
		</view>
		<view class="status-tool" v-if="status==0">
			<view class="button" >
				<u-button @click="payAgain" :custom-style="wd_button_plain" shape="circle" :ripple="true" :plain="true">立即支付</u-button>
			</view>
		</view>
		<view class="status-tool" v-else>
			<view class="button" >
				<u-button @click="bindMyActivity" :custom-style="wd_button_primary" shape="circle" :ripple="true">查看我的活动</u-button>
			</view>
			<view class="button">
				<u-button  @click="bindBackActivity" :custom-style="wd_button_plain" shape="circle" :ripple="true" :plain="true">返回活动列表</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0, 
				statusData: [
					{
						icon: '../../../static/icons/icon_status-error.png',
						title: '抱歉，参加活动失败！',
						info: '活动费用支付失败',
					},
					{
						icon: '../../../static/icons/icon_status-success.png',
						title: '恭喜，参加活动成功！',
						info: '活动费用已支付',
					}
				]
			}
		},
		onLoad(options) {
			let orderId = options.order_id;
			this.orderId = orderId;
			this.status = options.status || 0;
			// this.fetchOrder();
		},
		methods: {
			fetchOrder(){
				this.$core.get({url:'fitness.active/order_detail',data:{order_id: this.orderId},success:(ret)=>{
					this.status = ret.data.pay_status;
				},
				fail:(ret=>{
					uni.showModal({
						title:"提示",
						content: ret.msg,
						showCancel:false,
						success(res) {
							if(res.confirm){
								uni.navigateBack();
							}
						}
					})
					return false;
				})
				});
			},
			payAgain() {
				let that = this;
				this.$core.post({
					url: 'fitness.pay/pay',
					data: {
						type: 'active',
						pay_type: 1,
						order_id: that.orderId,
						platform: 'wxmini'
					},
					success: (ret) => {
						let wxconfig = ret.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wxconfig.timeStamp,
							nonceStr: wxconfig.nonceStr,
							package: wxconfig.package,
							signType: wxconfig.signType,
							paySign: wxconfig.paySign,
							success: function(res) {
								that.fetchOrder()
							},
							fail: function(err) {
							}
						});
					}
				});
			},
			bindBackActivity(){
				uni.navigateBack({delta:2});
			},
			bindMyActivity(){
				uni.redirectTo({
					url: '/pages/my/myActivity/myActivity'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 100rpx 0;
		min-height: 100vh;
		background-color: #FFFFFF;
	}
	.status-head {
		padding: 45rpx 90rpx;
		text-align: center;
		
		.icon {
			display: block;
			margin: 50rpx auto 0;
			width: 100rpx;
			height: 100rpx;
		}
		.title {
			margin-top: 30rpx;
			font-size: 32rpx;
			color: #333333;
		}
		.info {
			display: block;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
	.status-tool {
		padding: 45rpx 150rpx;
		
		.button {
			margin-bottom: 30rpx;
		}
	}
</style>